<template>
  <div class='container'>
    <el-dialog title="编辑标签" :visible="showEditdialog" @close='handleClose' @open='handleOpen'>
      <el-form :model="queryParams" :rules="rules" ref="EditRef" label-width="100px" class="demo-ruleForm">
        <el-form-item label="所属学科" prop="subjectName">
          <el-select v-model="queryParams.subjectName" placeholder="请选择">
            <!-- <el-option label="EditForm.subjectName" :value="EditForm.subjectID" /> -->
            <el-option v-for="item in subjectList" :key="item.id" :label="item.subjectName" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="标签名称" prop="tagName">
          <el-input v-model="queryParams.tagName" autocomplete="off" placeholder="请输入标签名称" size="small"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="handleClose">取 消</el-button>
        <el-button type="primary" @click="handleSubmit">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
// import { add } from '@/api/hmmm/tags.js'
import { list } from '@/api/hmmm/subjects.js'
import { update } from '@/api/hmmm/tags.js'
export default {
  props: {
    // 弹窗标志位
    showEditdialog: {
      type: Boolean,
      default: false
    },
    EditForm: {
      type: Object,
      required: true
    }
  },
  data () {
    return {
      // 表单数据
      queryParams: {
        subjectID: '',
        subjectName: '',
        tagName: ''
      },
      // 标签列表
      subjectList: [],
      // 表单校验规则
      rules: {
        subjectName: [
          { required: true, message: '请选择活动区域', trigger: 'change' }
        ],
        tagName: [
          { required: true, message: '请输入活动名称', trigger: 'blur' },
          { min: 3, max: 10, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ]
      },
      // 宽度标志位
      formLabelWidth: '120px'
    }
  },
  methods: {
    // 新增标签，提交数据
    async handleSubmit () {
      // 表单提交兜底校验
      // this.$refs.EditRef.validate(async (valid) => {
      //   if (!valid) return
      try {
        const ret = await update(this.queryParams)
        //     console.log(ret)
        //     // this.queryParams = ret.data.items
        if (ret.status === 200) {
          // console.log('编辑标签接口', ret)
          this.$message.success('编辑标签成功')
          this.$refs.EditRef.resetFields()
          this.handleClose()
          this.$emit('uploadList')
        }
      } catch (err) {
        console.dir(err)
        this.$message.error('编辑标签失败')
      }
    },
    // 监听open事件
    async handleOpen () {
      // this.queryParams.subjectName = this.EditForm.subjectName
      this.queryParams = this.EditForm
      const ret = await list({ page: 1, pagesize: 100000 })
      // console.log(ret)
      this.subjectList = ret.data.items
      // console.log(1, this.form.subjectID)
      // 发请求，获取下拉所属学科的数据
      // console.log(this.EditForm)

      console.log(this.EditForm)
      // const ret = await detail(this.EditForm)
      // console.log(ret)
      // this.queryParams = ret.data

      // this.queryParams.subjectID = ret.data.items.subjectID
      // this.queryParams.tagName = ret.data.items.tagName
      // ret.data.items.forEach(item => {
      //   this.subjectList.push(item.subjectName)
      // })
      // console.log(this.subjectList)
    },
    // 关闭弹窗
    handleClose () {
      this.$emit('update:showEditdialog', false)
      this.$refs.EditRef.resetFields()
      // this.form.id = -1
    }
  }
}
// computed: {
//   title () {
//     if(this.form.tags !=='' &&){

//     }
//     &&this.subjectList[0].tags  ?'编辑标签':  '添加标签'
//     return this.addRef.subjectID ? '添加标签' : '编辑标签'
//   }
// }
</script>

<style scoped lang='scss'>
// .el-input--medium {
//   width: 47%;
// }
</style>
